<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
        img{
            width: 100px;
            height: 100px;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 
            v-bind 属性绑定
                v-bind:属性='属性值'
                :属性='属性值'
         -->
         <a v-bind:href="info.herf" v-bind:traget="info.traget">{{ info.con }}</a>

         <img :src="imgs.src" :alt="imgs.alt" v-bind:title="imgs.title">

         <div :class="classname">222</div>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            info:{
                con:'百度',
                herf:'https://www.baidu.com',
                target:'_blank'
            },
            img:{
                src:'https://image.baidu.com/search/detail?z=0&word=%E5%9F%8E%E5%B8%82%E5%BB%BA%E7%AD%91%E6%91%84%E5%BD%B1%E4%B8%93%E9%A2%98&hs=0&pn=0&spn=0&di=&pi=3977&rn=&tn=baiduimagedetail&is=&ie=utf-8&oe=utf-8&cs=1595072465%2C3644073269&os=&simid=&adpicid=0&lpn=0&fr=albumsdetail&fm=&ic=0&sme=&cg=&bdtype=&oriquery=&objurl=https%3A%2F%2Ft7.baidu.com%2Fit%2Fu%3D1595072465%2C3644073269%26fm%3D193%26f%3DGIF&fromurl=ipprf_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bev2_z%26e3Bv54AzdH3Fv6jwptejAzdH3Fb88cc0c0a&gsm=&islist=&querylist=&album_tab=%E5%BB%BA%E7%AD%91&album_id=7',
                alt:'no',
            tittle:'vue'
            },
            classname:'box'
        },
    })
</script>
</html>